<template>
  <view class="page-content">
    <view class="u-p-l-10 u-p-r-10">
      <projectHead :projectInfo="objData"></projectHead>
    </view>
    <view class="u-m-t-20">
      <u-row>
        <u-col span="6" v-for="item in cardList" :key="item.prop">
          <cardItem :option="item">
            <template #body="{ prop, color }">
              <view class="u-m-b-15">
                <view 
                  v-if="
                    [
                      'taskCompletePercentage',
                      'aePercentage',
                      'saePercentage',
                      'susarPercentage',
                    ].includes(prop)
                  "
                >
                  <view class="u-font-30 font-bold u-text-color u-m-b-15">{{ percentage(report[prop]) }}%</view>
                  <u-line-progress
                    :active-color="color"
                    :percent="percentage(report[prop])"
                    :show-percent="false"
                  ></u-line-progress>
                </view>
                <view v-else-if="['subjectGroupPercentage'].includes(prop)">
                  <view class="u-font-30 font-bold u-text-color u-m-b-15">{{ setSubjectGroupPercentage(report[prop] * 100) }}%</view>
                  <u-line-progress
                    :active-color="color"
                    :percent="setSubjectGroupPercentage(report[prop] * 100)"
                    :show-percent="false"
                  ></u-line-progress>
                </view>
                <view v-else>
                  <view class="u-font-30 font-bold u-text-color u-m-b-15">{{ report[prop] }}</view>
                  <u-line-progress
                    :active-color="color"
                    :percent="
                      percentage(report[prop] / ((report[prop] || 0) + 100))
                    "
                    :show-percent="false"
                  ></u-line-progress>
                </view>
              </view>
            </template>
          </cardItem>
        </u-col>
      </u-row>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import projectHead from '../components/projectHead.vue';
import { cardList } from './index';
import cardItem from './components/cardItem.vue';
import { getProjectReport } from '@/api/modules/project';
import { setSubjectGroupPercentage } from '@/utils/tools';

const report = ref<any>({});
function getProjectReportFn() {
  getProjectReport({ projectId: objData.value.projectId }).then((res) => {
    report.value = res || {};
  });
}

// 百分比值转换
const percentage = (val: number) => {
  if (!val) {
    return 0;
  }
  return (val * 100).toFixed();
};

const objData = ref<any>({});
onLoad(() => {
  const { params } = (uni as any).$Router.getQuery();
  objData.value = JSON.parse(decodeURIComponent(params));
  getProjectReportFn();
});
</script>
<style lang="scss" scoped>
.page-content {
  padding: 30rpx 20rpx;
}
</style>
